<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        用户名：
        <input type="text" v-model="userinfo.username" /><br/> 密码:
        <input type="password" v-model="userinfo.password" /><br/> 确认密码：
        <input type="password" v-model="userinfo.confirmPassword" /><br/> 性别：
        <input type="radio" value="1" name="sex" v-model="userinfo.sex" />男
        <input type="radio" value="2" name="sex" v-model="userinfo.sex" />女<br/> 爱好：
        <input type="checkbox" value="读书" name="like" v-model="userinfo.like" />读书
        <input type="checkbox" value="踢球" name="like" v-model="userinfo.like" />踢球
        <input type="checkbox" value="购物" name="like" v-model="userinfo.like" />购物<br/> 城市：
        <select name="" id="" v-model="userinfo.city">
            <option value="南京">南京</option>
            <option value="上海">上海</option>
            <option value="湖州">湖州</option>
            <option value="青岛">青岛</option>
            <option value="北京">北京</option>
        </select><br/> 个人介绍:
        <br/>
        <textarea name="" id="" cols="30" rows="5" v-model="userinfo.content"></textarea>
        <br/>
        <button @click="submitFun">提交</button>

    </div>
    <script>
        Vue.config.productionTip = false //关闭生成信息提示
        var vm = new Vue({
            el: '#app',
            data: {
                userinfo: {
                    username: '',
                    password: '',
                    sex: 1,
                    like: [], //多选框爱好，使用数组进行数据存储
                    city: '',
                    content: '',
                },
                confirmPassword: '',
            },
            methods: {
                submitFun() {
                    //vue提交，使用ajax技术将userinfo对象传递给java服务器
                    console.log(this.userinfo.username)
                    console.log(this.userinfo.password)
                    console.log(this.userinfo.confirmPassword)
                    console.log(this.userinfo.sex)
                    console.log(this.userinfo.like)
                    console.log(this.userinfo.city)
                    console.log(this.userinfo.content)
                }
            },
        })
    </script>
</body>

</html>